/**
 * Threed module
 */
import React from 'react';
import { connect } from 'dva';
import { bindActionCreators } from 'redux';
import wizardActions from '../../../../actions/Editor/wizard';

class UsehelpWizard extends React.Component {
    handleOnNextStep() {
        const { step, showHelpMenu, setState } = this.props;
        if ((step + 1) > 5) {
            setState({
                step: 1,
                showHelpMenu: false,
            });
        } else {
            setState({
                step: step + 1,
                showHelpMenu,
            });
        }
    }
    handleOnExitHelp() {
        const { setState } = this.props;
        setState({
            step: 1,
            showHelpMenu: false,
        });
    }

    render() {
        const { showHelpMenu, step, fromTemplate } = this.props;
        const language = 'zh-CN';
        let stepNode = '';
        switch (step) {
        case 1:
            stepNode =
                (<div className="stepList editorLeft">
                  <div className="editor-left-help" />
                  <div className="editor-left-help-info">
                    <div className="help-header">{$._('Add widgets field')}</div>
                    <div>{$._('Choose widgets to add')}</div>
                  </div>
                  <div className="help-line" />
                </div>);
            break;
        case 2:
            stepNode =
                    (<div className="stepList editorTimeline">
                      <div className="editor-timeline-help" />
                      <div className="editor-timeline-help-info">
                        <div className="help-header">{$._('Animation controls')}</div>
                        <div>{$._('Animation controls content')}</div>
                      </div>
                      <div className="help-line" />
                    </div>);
            break;
        case 3:
            stepNode =
                    (<div className="stepList editorHeader">
                      <div className="editor-header-help" />
                      <div className="editor-header-help1" />
                      <div className="editor-header-help-info">
                        <div className="help-header">{$._('View and tool')}</div>
                        <div>{$._('View and tool to add page')}</div>
                      </div>
                      <div className="help-line" />
                      <div className="help-line1" />
                    </div>);
            break;
        case 4:
            stepNode =
                    (<div className="stepList editorRight">
                      <div className="editor-right-help" />
                      <div className="editor-right-help-info">
                        <div className="help-header">{$._('Widgets property filed')}</div>
                        <div>{$._('Widgets to add property animation')}</div>
                      </div>
                      <div className="help-line" />
                    </div>);
            break;
        case 5:
            stepNode =
                    (<div className="stepList editor_threed">
                      <div className="editor_threed_title">{$._('under 3D view')}</div>
                      <img src="/static/new_version/image/template/mouse.png" />
                      <div className="editor_mouse_scale">{$._('zoom view')}</div>
                      <div className="editor_mouse_rotate">{$._('rotate view')}</div>
                      <div className="editor_mouse_translate">{$._('Translate view')}</div>
                      <div className="editor_line_1">
                        <div className="guideCircle" />
                      </div>
                      <div className="editor_line_2">
                        <div className="guideCircle" />
                      </div>
                      <div className="editor_line_3">
                        <div className="guideCircle" />
                      </div>
                    </div>);
            break;
        default:
            break;
        }
        return (
          <div className="use-help-wizard" style={{ display: showHelpMenu && !fromTemplate ? 'block' : 'none' }}>
            {stepNode}
            <div className="skip-button">
              <div className={language === 'ja_JP' ? 'next-step-ja' : 'next-step'} id="help-next-step" onClick={() => this.handleOnNextStep()} />
              <div className={language === 'ja_JP' ? 'exit-help-ja' : 'exit-help'} id="exit-help" onClick={() => this.handleOnExitHelp()} />
            </div>
          </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(wizardActions, dispatch);
};

const mapStateToProps = ({ editor, wizard }) => {
    return {
        fromTemplate: editor.status.fromTemplate,
        step: wizard.step,
        showHelpMenu: wizard.showHelpMenu,
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(UsehelpWizard);
